<template>
	<section class="departmentStaff">
		<!--start  面包屑-->
		<div class="location">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item>设置</el-breadcrumb-item>
				<el-breadcrumb-item>部门与员工</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--end  面包屑-->
		<!--start content-->
		<div class="content" ref="departmentWrap">
			<!--start 新增部门下拉-->
			<div class="add">
				<transition name="fade">
					<div class="modal-backdrop" v-show="vue_add"></div>
				</transition>
				<transition name="slideDown">
					<div class="specific-search" v-show="vue_add">
						<div class="search-title">
							<p>新增部门</p>
						</div>
						<div class="form">
							<el-row>
								<el-col :span="11">
									<el-form :model="addForm" :rules="rules" ref="addDepartment" label-width="100px">
										<el-form-item label="部门名称" prop="department">
											<el-input v-model="addForm.department"></el-input>
										</el-form-item>
										<el-form-item label="上级部门" prop="parentDepartment">
											<el-select :disabled="addForm.disabled" v-model="addForm.parentDepartment" :placeholder="addForm.placeholder">
											</el-select>
										</el-form-item>
										<el-form-item>
											<el-button type="primary" @click="addOk(categoryParentCode)">确定</el-button>
											<el-button @click="addCancel">取消</el-button>
										</el-form-item>
									</el-form>
								</el-col>
							</el-row>
						</div>
					</div>
				</transition>
			</div>
			<!--end 新增部门下拉-->
			<!--start 修改部门下拉-->
			<div class="add">
				<transition name="fade">
					<div class="modal-backdrop" v-show="vue_update"></div>
				</transition>
				<transition name="slideDown">
					<div class="specific-search" v-show="vue_update">
						<div class="search-title">
							<p>修改部门</p>
						</div>
						<div class="form">
							<el-row>
								<el-col :span="11">
									<el-form :model="updateForm" :rules="rules" ref="updateDepartment" label-width="100px">
										<el-form-item label="部门名称" prop="department">
											<el-input v-model="updateForm.department"></el-input>
										</el-form-item>
										<el-form-item label="上级部门" prop="parentDepartment">
											<el-select :disabled="updateForm.disabled" v-model="updateForm.parentDepartment" :placeholder="updateForm.placeholder">
											</el-select>
										</el-form-item>
										<el-form-item>
											<el-button type="primary" @click="updateOk(deptCode)">确定</el-button>
											<el-button @click="updateCancel">取消</el-button>
										</el-form-item>
									</el-form>
								</el-col>
							</el-row>
						</div>
					</div>
				</transition>
			</div>
			<!--end 修改部门下拉-->

			<!--修改角色名称  start-->
			<div class="height-search">
				<transition name="fade">
					<div class="modal-backdrop" v-show="vue_modify"></div>
				</transition>
				<transition name="slideDown">
					<div class="height-s-con" v-show="vue_modify">
						<p class="search-title">修改角色名称</p>
						<el-form ref="modifyForm" :rules="rules1" :model="modifyForm" label-width="110px">
							<el-form-item label="角色名称" prop="accountNum">
								<el-input class="wInput" v-model="modifyForm.accountNum"></el-input>
							</el-form-item>
							<el-form-item label-width="15px">
								<el-button @click="modifySure" type="primary">确定</el-button>
								<el-button @click="modifyCancel">取消</el-button>
							</el-form-item>
						</el-form>
					</div>
				</transition>
			</div>
			<!--修改角色名称  end-->

			<el-tabs v-model="vue_activeName" class="contentWrap">
				<!-------------------------------------------员工账号  start--------------------------------------------------------------->
				<el-tab-pane label="员工账号" name="first">
					<div class="employNum-heard">
						<!--<div class="slideBtn fl" @click.stop="departmentType">
							<el-dropdown menu-align="start" trigger="click" @command="handleCommand">
								<span class="el-dropdown-link">
							    {{slideBtnMsg}}<i :class="{up:vue_allOrder}" class="el-icon-arrow-down el-icon--right slideBtnIcon"></i>
							  </span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="全部部门">全部部门</el-dropdown-item>
									<el-dropdown-item command="研发部">研发部</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>-->

						<div class="slideBtn fl" @click.stop="stateType">
							<el-dropdown menu-align="start" trigger="click" @command="handleCommandState">
								<span class="el-dropdown-link">
							    {{slideBtnMsgState}}<i :class="{up:vue_allState}"
                                         class="el-icon-arrow-down el-icon--right slideBtnIcon"></i>
							  </span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="全部状态">全部状态</el-dropdown-item>
									<el-dropdown-item command="启用">启用</el-dropdown-item>
									<el-dropdown-item command="停用">停用</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
						<div class="public-left clearfix fl">
							<div class="goods-input">
								<input type="text" placeholder="请输入员工姓名/账号/手机" v-model="memberOperatorQb.fullTextFields" @keydown.enter="queryByFullTextFields" /><i @click="queryByFullTextFields"></i>
							</div>
						</div>
						<el-button class="fr" type="primary" @click="addNewAccount()">新增账号</el-button>
					</div>
					<el-table 
						:data="memberOperatorSet.list" 
						:row-class-name="disableStateBtn" 
						:max-height="vue_tableH" 
						@sort-change="vFun_sort"
						style="width: 100%">
						<el-table-column prop="operatorAccount" sortable="custom" label="用户名" mix-width="190">
							<template scope="scope"><span class="goTo" @click="modifyBtn(scope.$index, memberOperatorSet.list)">{{ scope.row.operatorAccount}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="operatorName" sortable="custom" label="姓名" mix-width="140">
						</el-table-column>
						<el-table-column prop="operatorPosition" sortable="custom" label="职位" mix-width="150">
						</el-table-column>
						<el-table-column prop="deptName" label="部门" mix-width="150">
						</el-table-column>
						<el-table-column prop="operatorPhone" sortable="custom" label="手机" mix-width="140">
						</el-table-column>
						<el-table-column prop="operatorEmail" sortable="custom" label="邮箱">
						</el-table-column>
						<el-table-column prop="dataBillstateStr" label="状态" mix-width="100">
						</el-table-column>
						<el-table-column fixed="right" label="" width="60">
							<template scope="scope">
								<el-popover trigger="hover" class="rightR" placement="left-start">
									<p class="p" @click="modifyBtn(scope.$index, memberOperatorSet.list)"><em class="iconfont" style="font-size: 15px">&#xe61e;</em>修改</p>
									<p class="p" @click="memberOperator_batchEnable(scope.$index, memberOperatorSet.list)" v-if="memberOperatorSet.list[scope.$index].dataBillstate==1">
										<em class="iconfont" style="font-size: 17px">&#xe6f1;</em>启用
									</p>
									<p class="p" @click="memberOperator_batchDisable(scope.$index, memberOperatorSet.list)" v-if="memberOperatorSet.list[scope.$index].dataBillstate==0">
										<em class="iconfont" style="font-size: 17px">&#xe63a;</em>停用
									</p>
									<p class="p" @click="memberOperator_batchDelete(scope.$index, memberOperatorSet.list)" v-if="memberOperatorSet.list[scope.$index].dataBillstate==1">
										<em class="iconfont" style="font-size: 17px">&#xe644;</em>作废</p>
									<div slot="reference" class="name-wrapper">
										<el-tag><em class="iconfont tab-hover">&#xe607;</em></el-tag>
									</div>
								</el-popover>
							</template>
						</el-table-column>
					</el-table>
					<!--分页  start-->
					<div class="block">
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="parseInt(memberOperatorSet.pageTools.pageNo)"
							:page-sizes="memberOperatorSet.pageTools.pageSizeOptions"
							:page-size="parseInt(memberOperatorSet.pageTools.pageSize)"
							:total="parseInt(memberOperatorSet.pageTools.recordCount)"
							layout="total, prev, pager, next, sizes,jumper">
						</el-pagination>
					</div>
					<!--分页  end-->
				</el-tab-pane>
				<!-------------------------------------------部门设置  start--------------------------------------------------------------->
				<el-tab-pane label="部门设置" name="second">
					<el-row type="flex" class="row-bg" justify="space-between" style="border-bottom: 1px solid #e6ecf2;">
						<el-col :span="1">
							<div class="grid-content bg-purple"></div>
						</el-col>
						<el-col :span="2">
							<div class="grid-content bg-purple textR">
								<el-button type="primary" @click="addDep">新增部门</el-button>
							</div>
						</el-col>
					</el-row>
					<!--部门列表  start-->
					<div class="noBorder borderBottom rightPo">
						<el-tree :expand-on-click-node="false" :data="MemberDeptTree" :props="defaultProps" node-key="treeCode" ref="tree" :default-expanded-keys="expandTreeKeys" @node-expand="addKey" @node-collapse="deleteKey" :render-content="treeConentFn">
						</el-tree>
					</div>
					<!--部门列表  end-->
				</el-tab-pane>
				<!-------------------------------------------角色权限设置  start----------------------------------------------------------->
				<el-tab-pane label="角色权限设置" name="third" class="jurisdictionWrap">
					<el-form ref="form" :model="roleSetFromData" label-width="80px">
						<el-row :gutter="20">
							<el-col :span="24">
								<div class="title">角色权限管理</div>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="6">
								<el-form-item label="选择角色" prop="role">
									<el-select v-model="roleSetFromData.role" placeholder="请选择" @change="memberRoleFn">
										<el-option v-for="(item,index) in memberRole" :label="item.roleName" :value="item.roleCode"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item class="modifyRole">
									<span class="modifyHover" @click="vue_modify=true"><em class="iconfont">&#xe617;</em>修改角色名称</span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row style="margin-bottom:20px">
							<el-col :span="12" :offset="1">
								<p class="sayTips">说明:</p>
								<p class="sayTips">1、具备该角色的用户登录后显示操作员工作台；</p>
								<p class="sayTips">2、修改角色权限后，所有赋予此角色的员工账号对应权限均将修改；</p>
								<p class="sayTips">3、系统管理员角色不允许改名，也不允许修改其操作权限；</p>
								<p class="sayTips">
									4、"禁止查看商品价格与订单金额"的权限不得和【订单修改、订/退单审核、财务审核、代下订/退单、订单商品统计查看、订单商品统计导出、商品管理、商品删除、商品导出、促销管理以及资金所有权限、报表所有权限】同时勾选。</p>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="24">
								<span class="tipsLeft">角色权限明细</span>
							</el-col>
						</el-row>
						<table class="addAccount" cellpadding="0" cellspacing="0">
							<tr v-for="(item,index) in memberRolePmData">
								<td>{{item.treeName}}</td>
								<td>
									<el-form-item prop="type" label="">
										<template v-for="(item1,index1) in item.children">
											<el-checkbox-group v-for="(item2,index2) in item1.children" v-model="item2.selectCheckbox" style="margin-bottom:15px;">
												<el-checkbox v-for="(item3,index3) in item2.children" class="tableCheckbox" :label="item3.treeCode+'|'+item3.nodePropMap.menuType" name="type">{{item3.treeName}}</el-checkbox>
											</el-checkbox-group>
										</template>
									</el-form-item>
								</td>
							</tr>
						</table>
						<div class="fixedBox">
							<el-button @click="save_memberRolePm" type="primary" class="fixedBtn">保存</el-button>
						</div>

					</el-form>
				</el-tab-pane>
			</el-tabs>

		</div>

	</section>
</template>

<script>
	export default {
		data() {
			return {
				vue_activeName: "first", //默认table显示项
				vue_tableH:0,
				vue_allOrder: false, //全部部门下拉箭头旋转
				vue_allState: false, //全部状态下拉箭头旋转
				vue_modify: '', //修改角色名称面板显示
				vue_add: false, //新增部门下拉层面板显示
				vue_update: false, //修改部门下拉层面板显示
				slideBtnMsg: '全部部门', //全部部门默认
				slideBtnMsgState: '全部状态', //全部状态默认

				modifyForm: { //修改角色名称form数据
					accountNum: ''
				},
				roleSetFromData: { //角色权限管理
					role: '',
				},
				companyMsgData: { //角色权限form数据
					type: [],
					name: "",
					valueData: '',
				},

				categoryParentCode: "", //新增部门点确定父节点
				deptCode: "", //修改部门点确定接受的参数
				expandTreeKeys: [], //部门tree属性

				memberRolePmData:[],  //权限dataList
				vue_memberRole_selectCheckboxList:"",  //选中的权限

				//员工账户信息
				memberOperatorSet:{
					"list":[],  //数据列表
					"page":{},	//分页数据
					"sumInfo":{}, //汇总信息
				},
				//员工账户查询条件
				memberOperatorQb:{
					dataBillstate:"",
					fullTextFields:"",
					orderStr:'',
				},
				MemberDeptTree: [], //部门列表MemberDeptTree
				memberRole:[],      //角色列表

				addForm: { //增加部门下拉form数据
					department: '',
					parentDepartment: '',
					disabled: true,
					placeholder: "根类别"
				},
				updateForm: { //修改部门下拉层form数据
					department: '',
					parentDepartment: '',
					disabled: true,
					placeholder: ""
				},
				defaultProps: { //部门列表tree属性
					children: 'children',
					label: 'treeName'
				},
				rules1: { //修改角色名称form数据验证
					accountNum: [{
						required: true,
						message: '角色名称不能为空',
						trigger: 'blur'
					},{
						required: true,
						min:0,
						max:10,
						message: '角色名称不能大于十个字',
						trigger: 'blur'
					}]
				},
				rules: { //修改部门、新增部门form验证
					department: [{
							required: true,
							message: '部门名称不能为空',
							trigger: 'blur'
						},
						{
							required: true,
							min: 0,
							max: 10,
							message: '部门名称不能超过十个字',
							trigger: 'blur'
						}
					],
					parentDepartment: [{}]
				},
			}
		},
		methods: {
    	vFun_sort(type){
    		if(type.order==='ascending'){
    			this.memberOperatorQb.orderStr=type.prop
    		}else if(type.order==='descending'){
    			this.memberOperatorQb.orderStr=type.prop +' desc'
    		}else{
    			this.memberOperatorQb.orderStr=''
    		};
    		this.queryByPage();
    	},			
			save_memberRolePm(){  //角色权限save
				this.vue_memberRole_selectCheckboxList="";
				this.memberRolePmData.forEach((item)=>{
					if(item['children']){
						item['children'].forEach((item1)=>{
							if(item1['children']){
								item1['children'].forEach((item2)=>{
									item2.selectCheckbox.forEach((item3)=>{
										this.vue_memberRole_selectCheckboxList+=item3+","
									})
								})
							}
						})
					}
				})
				this.axios({
					method:"POST",
					url:"/v3/member/rolePms/saveMemberRolePm",
					data:{
						"roleCode":this.roleSetFromData.role,
						"permissionStr":this.vue_memberRole_selectCheckboxList
					}
				}).then((res)=>{
					this.Public.openSuccess(this,"操作成功！");
		  			this.vue_activeName="first";
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				})
			},
			query_rolePmsQueryTree(){  //请求权限dataList
				this.axios({
					method:"POST",
					url:"/v3/member/rolePms/queryTree"
				}).then((res)=>{
					this.memberRolePmData=res.data;
					this.memberRolePmData.forEach((item)=>{
						if(item['children']){
							item['children'].forEach((item1)=>{
								if(item1['children']){
									item1['children'].forEach((item2)=>{
										this.$set(item2,'selectCheckbox',[])
									})
								}
							})
						}
					})
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				})
			},
//--------------点击下拉箭头关闭另一个下拉箭头 (已注释)-------------------
			departmentType() {
				this.vue_allOrder = !this.vue_allOrder;
				this.vue_allState = false;
			},
			stateType() {
				this.vue_allState = !this.vue_allState;
				this.vue_allOrder = false;
			},
//----------------禁用后行数变灰  start-----------------------------------
			disableStateBtn(rowData, index) {
				return rowData.dataBillstate == "1" ? "grayColor" : "";
			},

//-------------------------修改角色名称   start---------------
			modifySure() {
				this.$refs.modifyForm.validate((valid)=>{
					if(valid){
						this.axios({
							method:"PUT",
							url:"/v3/member/roles/"+this.roleSetFromData.role,
							data:{
								"roleName":this.modifyForm.accountNum
							}
						}).then((res)=>{
							this.Public.openSuccess(this,"操作成功！");
							this.queryMemberRole();
							this.vue_modify = false;
						}).catch((err)=>{
							this.Public.openError(this,err.response.data)
						})
					}else{
						return false;
					}
				})
			},
//-------------------------取消角色名称------------------------------------
			modifyCancel() {
				this.vue_modify = false;
				this.$refs.modifyForm.resetFields()
			},
//---------------------------下拉箭头(已注释)------------------------
			handleCommand: function(command) {
				this.slideBtnMsg = command;
				this.vue_allOrder = false;
			},
//---------------部门列表tree的key   start------------
			addKey(data, node, dom) {
				this.expandTreeKeys.push(node.key)
			},

//--------------部门列表tree的deleteKey  start---------
			deleteKey(data, node, dom) {
				for(var i = 0; i < this.expandTreeKeys.length; i++) {
					if(this.expandTreeKeys[i] == node.key) {
						this.expandTreeKeys.splice(i, 1);
						break;
					}
				}
			},
//------------新增部门面板显示--------------------------
			addDep() {
				this.vue_add = true;
				this.addForm.placeholder = "根类别";
				this.categoryParentCode = "-1";
			},
//------------新增子部门面板显示--------------------------
			addChildrenDep(data) {
				this.categoryParentCode = data.treeCode;
				this.addForm.placeholder = data.treeName;
				this.vue_add = true;
			},
//------------部门信息更新面板显示-----------------------------------
			updateDep(node, data) {
				if("-1" == data.treeParentCode) {
					this.updateForm.placeholder = "根类别";
				} else {
					this.updateForm.placeholder = node.parent.label;
				}
				this.deptCode = data.treeCode;
				this.updateForm.department = data.treeName;
				this.vue_update = true;
			},
//------------部分修改确认-----------------------------------------
			updateOk(code) {
				this.$refs.updateDepartment.validate((valid) => {
					if(valid) {
						this.axios({
							method: 'PUT',
							url: "/v3/member/depts/"+code,
							data: {
								"deptCode": code,
								"deptName": this.updateForm.department,
							}
						}).then((res) => {
							this.vue_update = false;
							this.$refs.updateDepartment.resetFields();
							this.Public.openSuccess(this,"操作成功！")
							this.queryTree();
						}).catch((err)=>{
							this.Public.openError(this,err.response.data)
						});
					} else {
						this.Public.openError(this,'品牌名称不能为空');
						return false;
					}
				})
			},
//----------------部门修改取消-----------------------------------
			updateCancel() {
				this.vue_update = false;
				this.$refs.updateDepartment.resetFields();
			},
//------------部门信息置顶-----------------------------------
			memberDept_batchStick(data) {
				this.axios({
					method: 'GET',
					url: "/v3/member/depts/"+data.treeCode+"/stick"
				}).then((res) => {
					this.Public.openSuccess(this,"操作成功！");
					this.queryTree();
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				});
			},
//------------部门删除-----------------------------------
			memberDept_batchDelete(data) {
				if("0" != data.hasChildren) {
					//可删除
					this.$confirm('确认删除此部门？', '确认', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						cancelButtonClass: "fr",
						confirmButtonClass: "fr",
						customClass: "clearfixBox"
					}).then(() => {
						//点击确定的回调
						this.axios({
							method: 'DELETE',
							url: '/v3/member/depts/'+data.treeCode
						}).then((res) => {
							this.Public.openSuccess(this,"操作成功！")
							this.queryTree();
						}).catch((err)=>{
							this.Public.openError(this,err.response.data)
						});
					}).catch(() => {
						this.Public.openError(this,err.response.data)
					});
				}
			},
//------------------------新增部门--------------------------------
			addOk(parentCode) {
				this.$refs.addDepartment.validate((valid) => {
					if(valid) {
						this.axios({
							method: 'POST',
							url: "/v3/member/depts",
							data: {
								"deptName": this.addForm.department,
								"deptParentCode": parentCode
							}
						}).then((res) => {
								this.vue_add = false;
								this.Public.openSuccess(this,"操作成功！");
								this.$refs.addDepartment.resetFields();
								this.queryTree();
						}).catch((err)=>{
							this.vue_add = false;
							this.$refs.addDepartment.resetFields();
							this.Public.openError(this,err.response.data)
						});
					} else {
						return false;
					}
				})
			},
//---------------------新增部门取消--------------------------
			addCancel() {
				this.vue_add = false;
				this.$refs.addDepartment.resetFields();
			},
//---------------------部门操作按钮显示------------------------
			treeConentFn(createElement, {
				node,
				data,
				store
			}) {
				var _this = this;
				return createElement('span', [
					createElement('span', node.label),
					createElement('span', {
						attrs: {
							class: "btnSpan posiRight"
						}
					}, [
						createElement('span', {
							attrs: {
								class: ""
							},
							on: {
								click: function(e) {
									var e = e || event;
									e.stopPropagation();
									_this.addChildrenDep(data);
								}
							}
						}, [
							createElement('span', {
								attrs: {
									class: "iconfont addChildrenIcon"
								}
							}, ''),
							createElement('span', {
								attrs: {
									class: ""
								}
							}, '新增子类')
						]),
						createElement('span', {
							attrs: {
								class: ""
							},
							on: {
								click: function(e) {
									var e = e || event;
									e.stopPropagation();
									_this.updateDep(node, data);
								}
							}
						}, [
							createElement('span', {
								attrs: {
									class: "iconfont updateIcon"
								}
							}, ''),
							createElement('span', {
								attrs: {
									class: ""
								}
							}, '修改')
						]),
						createElement('span', {
							attrs: {
								class: ""
							},
							on: {
								click: function(e) {
									var e = e || event;
									e.stopPropagation();
									_this.memberDept_batchStick(data);
								}
							}
						}, [
							createElement('span', {
								attrs: {
									class: "iconfont stickIcon"
								}
							}, ''),
							createElement('span', {
								attrs: {
									class: ""
								}
							}, '置顶')
						]),
						createElement('span', {
							attrs: {
								class: ""
							},
							on: {
								click: function(e) {
									var e = e || event;
									e.stopPropagation();
									_this.memberDept_batchDelete(data);
								}
							},
							"class": {
								"noActive": data.hasChildren - 1
							}
						}, [
							createElement('span', {
								attrs: {
									class: "iconfont deleteIcon"
								}
							}, ''),
							createElement('span', {
								attrs: {
									class: ""
								}
							}, '删除')
						])
					])
				])
			},
			iconTextFn(objClassName, text) {
				let i = 0,
					Dobj = document.getElementsByClassName(objClassName);
				for(; i < Dobj.length; i++) {
					Dobj[i].innerHTML = text;
				};
			},
//---------------------------分页     start--------------------
			handleSizeChange(val) {
				this.memberOperatorSet.pageTools.pageSize = val;
				this.queryByPage();
			},
			handleCurrentChange(val) {
				this.memberOperatorSet.pageTools.pageNo = val;
				this.queryByPage();
			},
//----------------------修改员工账号  start--------------
			modifyBtn(index, data) {
				this.Public.setCookie("operatorCode",data[index].operatorCode,1)
				this.$router.push('/set/modifyAccount')
			},

//----------------------新增员工账号  start-------------
			addNewAccount() {
				this.$router.push('/set/addNewAccount')
			},
//-------------------查询员工账号列表------------------------------
			queryByPage(state) {
				this.axios({
					method: 'POST',
					url: "/v3/member/operators/list",
					data: {
						"limit": this.memberOperatorSet.pageTools.pageSize,
						"offset": (this.memberOperatorSet.pageTools.pageNo-1)*this.memberOperatorSet.pageTools.pageSize,
						"dataBillstate":this.memberOperatorQb.dataBillstate,
						"fullTextFilterStr": this.memberOperatorQb.fullTextFields,
						"orderStr":this.memberOperatorQb.orderStr,
					}
				}).then((res) => {
					this.memberOperatorSet.list = res.data.list;
					this.memberOperatorSet.pageTools = res.data.pageTools;
					this.memberOperatorSet.sumInfo = res.data.sumInfo;
					this.memberOperatorSet.pageTools.pageSizeOptions = JSON.parse(this.memberOperatorSet.pageTools.pageSizeOptions);
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				})
			},
//---------------------------状态过滤员工账号------------------------
			handleCommandState: function(command) {
				this.slideBtnMsgState = command;
				this.fullTextFields = "";
				this.vue_allState = false;
				if("全部状态"==command){
					this.memberOperatorQb.dataBillstate = ""
				}else if("启用"==command){
					this.memberOperatorQb.dataBillstate = "0"
				}else if("停用"==command){
					this.memberOperatorQb.dataBillstate = "1"
				}
				this.queryByPage();
			},
//---------------------员工账号模糊查询---------------------------
			queryByFullTextFields(){
				this.memberOperatorSet.pageTools = this.$store.state.page;
				this.queryByPage();
				this.memberOperatorQb.fullTextFields = "";
			},
//--------------------------员工账号启用  start------------------------------
			memberOperator_batchEnable(index, data) {
				const h = this.$createElement;
				this.$msgbox({
					title: '确认',
					message: h('div', {
						style: 'padding:20px;'
					}, [
						h('p', {
								style: 'text-align: center;font-size: 14px;color: #415161;text-align: center;line-height: 25px;margin-bottom: 8px;'
							},
							'是否确认启用该账号' + data[index].operatorAccount + '？'
						),
					], ),
					customClass: "surePay clearfixBox",
					cancelButtonClass: 'fr fontSize12',
					confirmButtonClass: 'fr fontSize12',
					showCancelButton: true,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(action => {
					if(action === 'confirm') {
						this.axios({
							method: 'PATCH',
							url: "/v3/member/operators/"+data[index].operatorCode+"/batchEnable"
						}).then((res) => {
              this.queryByPage();
							this.Public.openSuccess(this,"操作成功！")
						}).catch((err)=>{
							this.Public.openError(this,err.response.data)
						});

					}
				});
			},
//--------------------------员工账号删除  start-----------------------
			memberOperator_batchDelete(index, data) {
				const h = this.$createElement;
				this.$msgbox({
					title: '确认',
					message: h('div', {
						style: 'padding:20px;'
					}, [
						h('p', {
								style: 'text-align: center;font-size: 14px;color: #415161;text-align: center;line-height: 25px;margin-bottom: 8px;'
							},
							'删除后账号不可恢复, 不可重建, 请谨慎操作! 是否确认删除？'
						),
					], ),
					customClass: "surePay clearfixBox",
					cancelButtonClass: 'fr fontSize12',
					confirmButtonClass: 'fr fontSize12',
					showCancelButton: true,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(action => {
					if(action === 'confirm') {
						this.axios({
							method: 'DELETE',
							url: "/v3/member/operators/"+data[index].operatorCode
						}).then((res) => {
							this.Public.openSuccess(this,"操作成功！");
							this.queryByPage();
						}).catch((err)=>{
							this.Public.openError(this,err.response.data)
						});

					}
				});
			},
//--------------------------员工账号禁用  start-----------------
			memberOperator_batchDisable(index, data) {
				const h = this.$createElement;
				this.$msgbox({
					title: '确认',
					message: h('div', {
						style: 'padding:20px;'
					}, [
						h('p', {
								style: 'text-align: center;font-size: 14px;color: #415161;text-align: center;line-height: 25px;margin-bottom: 8px;'
							},
							'是否确认禁用该账号' + data[index].operatorAccount + '？'
						),
					], ),
					customClass: "surePay clearfixBox",
					cancelButtonClass: 'fr fontSize12',
					confirmButtonClass: 'fr fontSize12',
					showCancelButton: true,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(action => {
					if(action === 'confirm') {
						this.axios({
							method: 'PATCH',
							url: "/v3/member/operators/"+data[index].operatorCode+"/batchDisable"
						}).then((res) => {
							this.Public.openSuccess(this,"操作成功！");
							this.queryByPage();
						}).catch((err)=>{
							this.Public.openError(this,err.response.data);
						});

					}
				});
			},
//---------------------查询单个角色的权限明细---------------------------
		  memberRoleFn(data){
		  	this.memberRole.forEach((item,index,arr)=>{
		  		if(item.roleCode==data)this.modifyForm.accountNum = item.roleName;
		  	});
		  	this.query_memberRolePm(data);
		  },
//----------------------请求角色信息---------------------------
		  queryMemberRole(){
		  	this.axios({
				method:"POST",
				url:"/v3/member/roles/listAll",
				data:{}
			}).then((res)=>{
				this.memberRole = res.data.list;
				this.roleSetFromData.role = res.data.list[0].roleCode;
				this.query_memberRolePm(res.data.list[0].roleCode);
			}).catch((err)=>{
				this.Public.openError(this,err.response.data)
			})
		 },
//----------------------请求角色的权限明细---------------------------
		 query_memberRolePm(roleCode){
		 	this.axios({
		 		method:"GET",
		 		url:"/v3/member/rolePms/" + roleCode + "/queryRolePmTree",
		 		data:{
		 		}
		 	}).then((res)=>{
		 		this.memberRolePmData=res.data;
		 		this.memberRolePmData.forEach((item)=>{
					if(item['children']){
						item['children'].forEach((item1)=>{
							if(item1['children']){
								item1['children'].forEach((item2)=>{
									this.$set(item2,'selectCheckbox',[]);
									if(item2.children){
										item2.children.forEach((item3)=>{
											if(item3.disabled){
												item2.selectCheckbox.push(item3.treeCode+"|"+item3.nodePropMap.menuType)
											}
										})
									}
								})
							}
						})
					}
				})
		 	}).catch((err)=>{
		 		this.Public.openError(this,err.response.data)
		 	})
		 },
//----------------------查询部门树--------------------------------
         queryTree(){
         	this.axios({
				method: 'GET',
				url: "/v3/member/depts/queryTree"
			}).then((res) => {
				this.MemberDeptTree = res.data;
			}).catch((err)=>{
				this.Public.openError(this,err.response.data)
			});
        },
		},
		created(){
			this.memberOperatorSet.pageTools = this.$store.state.page;
		},
		mounted() {

			this.iconTextFn("addChildrenIcon", "&#xec52;");
			this.iconTextFn("updateIcon", "&#xe617;");
			this.iconTextFn("stickIcon", "&#xe663;");
			this.iconTextFn("deleteIcon", "&#xec50;");

			this.queryByPage();      //翻页查询会员账号
			this.queryMemberRole();  //请求角色信息
			this.queryTree();        //查询部门树

			document.querySelector(".borderBottom").style.height = (document.documentElement.clientHeight - 230) + 'px';
			document.querySelector(".jurisdictionWrap").style.height = (document.documentElement.clientHeight - 190) + 'px';
			this.vue_tableH = document.documentElement.clientHeight - 250;
			//---------------------------点击下拉箭头旋转---------------------------
			document.querySelector('body').onclick = () => {
				if(this.vue_allOrder == true) {
					this.vue_allOrder = false;
				}
			};
		},
		updated() {
			this.iconTextFn("addChildrenIcon", "&#xec52;");
			this.iconTextFn("updateIcon", "&#xe617;");
			this.iconTextFn("stickIcon", "&#xe663;");
			this.iconTextFn("deleteIcon", "&#xec50;");
		}
	};
</script>

<style scoped>
	.contentWrap .block {
		float: right;
		margin-top: 10px;
	}

	.goTo:hover {
		color: #13c19f;
		cursor: pointer;
	}

	.modifyHover:hover {
		color: #13c19f;
		cursor: pointer;
	}

	.wInput {
		width: 384px;
	}

	.height-s-con {
		position: absolute;
		width: 100%;
		height: 220px;
		top: 0;
		left: 0;
		padding: 30px;
		z-index: 1005;
		background: #fff;
		box-sizing: border-box;
		box-shadow: 0 0 10px #ccc;
		overflow: hidden;
	}

	.search-title {
		font-size: 16px;
		border: 0;
		color: #415161;
		margin-bottom: 20px;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: .4s;
	}

	.fade-enter,
	.fade-leave-active {
		opacity: 0;
	}

	.slideDown-enter-active,
	.slideDown-leave-active {
		transition: .4s;
	}

	.slideDown-enter,
	.slideDown-leave-active {
		opacity: 0;
	}

	.fixedBox {
		bottom: 10px;
		position: fixed;
		width: 87%;
		background: #fff;
		height: 45px;
		line-height: 45px;
		z-index: 10;
	}

	.fixedBtn {
		color: #fff !important;
		background: #13C19F !important;
		z-index: 100;
		cursor: pointer;
		border: 0;
	}

	.tipsLeft {
		font-size: 14px;
	}

	.tableCheckbox {
		width: 205px;
		margin-right: 0px !important;
		height: 20px !important;
		line-height: 20px !important;
	}

	.el-checkbox {
		margin-left: 0px !important;
		margin-right: 15px;
	}

	.addAccount {
		border: 1px solid #e7e9f1;
		margin-top: 20px;
		width: 100%;
	}

	.addAccount tr td {
		padding: 4px 8px;
		border-bottom: 1px solid #e7e9f1;
	}

	.addAccount tr td:first-child {
		width: 100px;
		text-align: center;
		background: #eff1f8;
	}

	.sayTips {
		line-height: 25px;
		color: rgb(147, 166, 183);
	}

	.title {
		margin: 30px 0px 15px 0px;
		font-size: 14px;
	}

	.p {
		text-indent: 10px;
		line-height: 30px;
		cursor: pointer;
	}

	.p em {
		position: relative;
		top: 2px;
		margin-right: 3px;
	}

	.p:hover {
		background: #eef1f9;
		color: #03B8CC;
	}

	.borderBottom {
		overflow-y: auto;
	}

	.goods-input i {
		background: url(../../../img/sousuo.png) no-repeat;
		height: 20px;
		width: 20px;
		display: inline-block;
		position: relative;
		top: 3px;
		right: 5px;
		cursor: pointer;
	}

	.goods-input:hover {
		border-color: #13C19F;
		transition: 1s;
	}

	.goods-input {
		float: left;
		width: 340px;
		border: 1px solid #cdd9e6;
		border-radius: 4px;
		margin-right: 10px;
		height: 34px;
		cursor: pointer;
	}

	.goods-input input {
		display: block;
		float: left;
		width: 290px;
		height: 34px;
		font-size: 12px;
		border: 0;
		margin-left: 20px;
	}

	.slideBtn {
		line-height: 36px;
		margin-right: 26px;
	}

	.slideBtn div span {
		cursor: pointer;
		display: block;
	}

	.slideBtn div {
		font-size: 12px;
	}

	.slideBtnIcon {
		transition: .4s;
	}

	.slideBtnIcon.up {
		transform: rotate(-180deg);
	}

	.employNum-heard {
		padding-top: 10px;
		height: 36px;
		line-height: 36px;
		margin-bottom: 10px;
		padding-left: 16px;
	}

	section {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	div.location {
		flex: 0 0 10px;
		padding: 3px 0 15px 0;
	}

	div.content {
		flex: 1;
		padding: 0px 20px 10px;
		background-color: #fff;
		position: relative;
	}

	.grid-content {
		height: 50px;
		line-height: 50px;
	}

	.wrapUl>li:not(.noWrapUl) {
		width: 100%;
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #e6ecf2;
		transition: .2s;
		background-color: #fff;
	}

	div.content ul.active li {
		width: 100%;
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #e6ecf2;
		transition: .2s;
		background-color: #fff;
	}

	div.content ul.active {
		overflow-y: auto;
	}

	div.content ul.active li:hover {
		background-color: #F5F7FC;
	}

	div.content ul.active li:hover div.setBox {
		display: block;
	}

	div.content ul.active li div.setBox {
		display: none;
		padding-right: 10px;
	}

	li p {
		padding-left: 20px;
	}

	.textR {
		text-align: right;
	}

	.font12 {
		font-size: 12px;
	}
	/* start add */

	.modal-backdrop {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 80;
		background-color: rgba(240, 240, 240, 0.2);
		/*background-color: rgba(0, 0, 0, .2);*/
	}

	.specific-search {
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		padding: 30px;
		z-index: 1005;
		background: #fff;
		box-sizing: border-box;
		box-shadow: 0 0 10px #ccc;
	}

	.search-title {
		font-size: 16px;
		border: 0;
		color: #415161;
	}

	.form {
		width: 1000px;
		background: #fff;
		margin: 20px 0;
	}

	.search-btn {
		margin-top: 50px;
	}

	.specific-search {
		height: 260px;
	}
	/* end add */

	.fade-enter-active,
	.fade-leave-active {
		transition: .4s;
	}

	.fade-enter,
	.fade-leave-active {
		opacity: 0;
	}

	.slideDown-enter-active,
	.slideDown-leave-active {
		transition: .4s;
	}

	.slideDown-enter,
	.slideDown-leave-active {
		/*height: 0;*/
		opacity: 0;
	}

	div.content ul li.title {
		font-size: 14px;
		background-color: #EEF1F9;
	}
	/* start 角色权限样式 */
	.jurisdictionWrap{
		overflow-y: auto;
		overflow-x: hidden;
	}
	/* end 角色权限 */
</style>
